<template>
  <div>
    <div>表单中的table表格中的input验证</div>
    <el-form ref="formData" :model="formData">
      <el-table
          :data="formData.tableData"
          style="width: 100%"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center'}">
        <el-table-column prop="type"
                         label="分类">
        </el-table-column>
        <el-table-column
            prop="date"
            label="日期"
        >
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.date'" :rules="rules.date">
              <el-input v-model="scope.row.date" placeholder="请输入"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
            prop="name"
            label="姓名"
        >
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.name'" :rules="rules.name">
              <el-input v-model="scope.row.name" placeholder="请输入"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column
            prop="address"
            label="地址">
          <template slot-scope="scope">
            <el-form-item :prop="'tableData.' + scope.$index + '.address'" :rules="rules.address">
              <el-input v-model="scope.row.address" placeholder="请输入"></el-input>
            </el-form-item>
          </template>
        </el-table-column>
        <el-table-column label="开始日期" header-align="center" align="center" min-width="200">
            <template slot-scope="scope">
              <el-form-item
                            :rules="rules.beginDate" label-width="0"
                            :prop=" 'tableData.' + scope.$index + '.beginDate' "
                            :id="'tableData.' + scope.$index + '.beginDate'">
                <el-date-picker v-model="scope.row.beginDate" class="input-width-max"
                                :picker-options= "{
                                   disabledDate(time){
                                      if (scope.row.endDate) {
                                          return time.getTime() > new Date(scope.row.endDate).getTime()
                                      }
                                  }
                                }"
                                placeholder="请选择开始日期" value-format="yyyy-MM-dd"/>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column label="结束日期" header-align="center" align="center" min-width="200">
            <template slot-scope="scope">
              <el-form-item
                            :rules="rules.endDate" label-width="0"
                            :prop=" 'tableData.' + scope.$index + '.endDate' "
                            :id="'tableData.' + scope.$index + '.endDate'">
                <el-date-picker v-model="scope.row.endDate" class="input-width-max"
                                :picker-options= "{
                                    disabledDate(time){
                                      if (scope.row.beginDate) {
                                          return time.getTime() < new Date(scope.row.beginDate).getTime() - 3600*1000*24
                                      }
                                    }
                                }"
                                placeholder="请选择结束日期" value-format="yyyy-MM-dd"/>
              </el-form-item>
            </template>
          </el-table-column>
      </el-table>
    </el-form>
    <el-row style="margin-top: 10px">
      <el-button @click="rebuildTableData">重组表格</el-button>
      <el-button @click="save">保存</el-button>
    </el-row>


    <el-form>
      <el-form-item>
        <el-date-picker
            v-model="value2"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="{
                disabledDate(time) {
                  return time.getTime() > Date.now();
                }
           }">
        </el-date-picker>
      </el-form-item>
    </el-form>


  </div>
</template>
<script>
export default {
  name: 'elementui-table',
  components: {},
  data() {
    return {
      formData: {
        tableData: [
          {name:'小明',date:'2021-02-01',address: '桃园路1'},
          {name:'小红',date:'2021-02-02',address: '桃园路2'},
          {name:'小青',date:'2021-02-03',address: '桃园路3'},
        ]
      },
      rules: {
        date: [
          {required: true, message: '请输入', trigger: 'blur'},
        ], name: [
          {required: true, message: '请输入', trigger: 'blur'},
        ], address: [
          {required: true, message: '请输入', trigger: 'blur'},
        ],beginDate:[
          {required:true,message:'请输入开始日期',trigger:'blur'}
        ],endDate:[
          {required:true,message:'请输入结束日期',trigger:'blur'}
        ]
      },
      testData: {
        current: [],
        before: [
          {id: "1", date: '1', name: '1', address: "1", typeId: '1'},
          {id: "2", date: '2', name: '2', address: "2", typeId: '2'},
          {id: "3", date: '3', name: '3', address: "3", typeId: '3'},
        ]
      },
      value1: '',
      value2: '',
      pickerOptions: {
        disabledDate(time) {
          console.log("time:",time)
          return time.getTime() > Date.now();
        }
      }
    }
  },
  watch: {},
  methods: {
    rebuildTableData() {
      // let res = [
      //   {typeId: '1', typeText: '专业1'},
      //   {typeId: '2', typeText: '专业2'},
      //   {typeId: '3', typeText: '专业3'},
      // ];
      // res.map(item => {
      //   this.formData.tableData.push({
      //     type: item.typeText
      //   })
      // });
    },
    save(){
      console.log("保存的数据,",this.formData.tableData)
    },
  },


};
</script>

<style lang="less">
.cell-style-self.el-table td,
.cell-style-self.el-table td,
.cell-style-self.el-table td .cell {
  padding-right: 0;
  padding-left: 0;

}

/*.progress-img /deep/.el-table .cell{padding-right: 0px!important;padding-left: 0!important;}*/
.progress {
  display: inline-block;
  background: #C5E9F9;
  height: 80%
}

.clearPadding {
  padding-right: 0px !important;
  padding-left: 0 !important;
}

//.el-table td.el-table__cell div {padding-right: 0px!important;padding-left: 0!important;}
.progress-blue {
  background: #C5E9F9
}
</style>